<!-- 151/266/267 组件-->
<template>
	<div>
		<a-space class="common-button-group">
			<a-button
				type="primary"
				:loading="searchBtnLoading"
				@click="handleSearch"
				>{{ $t('common_query') }}</a-button
			>
		</a-space>
		<t-query-form
			layout="inline"
			group="tabProcessGroup"
			ref="queryForm"
			:rules="rules"
			:model="queryForm"
		>
      <a-form-item :label="$t('T9_shopId')" name="shopId">
<a-select v-model:value="queryForm.shopId" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
<a-select-option v-for="item in options.shopIdList" :key="item.value" :value="item.label">
{{item.label}}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('T9_type')" name="type">
<a-select v-model:value="queryForm.type" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
<a-select-option v-for="item in options.typeList" :key="item.value" :value="item.label">
{{item.label}}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('T9_settingCode')" name="settingCode">
<a-select v-model:value="queryForm.settingCode" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
<a-select-option v-for="item in options.settingCodeList" :key="item.value" :value="item.label">
{{item.label}}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('T9_boxPalletId')" name="boxPalletId">
<a-input
					v-model:value="queryForm.boxPalletId"
					allow-clear
					class="select-width"
					:placeholder="$t('common_pleaseEnter1')"
				/>
</a-form-item>
<a-form-item :label="$t('T9_boxPalletState')" name="boxPalletState">
<a-select v-model:value="queryForm.boxPalletState" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
  <template v-if="queryForm.type">
        <a-select-option value="Created">Created</a-select-option>
        <a-select-option v-if="queryForm.type==='Box'" value="Scrapped">Scrapped</a-select-option>
        <a-select-option value="Released">Released</a-select-option>
        <a-select-option value="Shipped">Shipped</a-select-option>
  </template>
</a-select>
</a-form-item>
<a-form-item :label="$t('T9_inUseState')" name="inUseState">
<a-select v-model:value="queryForm.inUseState" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
<a-select-option v-for="item in options.inUseStateList" :key="item.value" :value="item.label">
{{item.label}}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('T9_processGroupState')" name="processGroupState">
<a-select v-model:value="queryForm.processGroupState" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
<a-select-option v-for="item in options.processGroupStateList" :key="item.value" :value="item.label">
{{item.label}}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item :label="$t('T9_eqId')" name="eqId">
<a-select v-model:value="queryForm.eqId" allow-clear class="select-width" :placeholder="$t('common_pleaseSelect')">
<a-select-option v-for="item in options.eqpIdList" :key="item.value" :value="item.label">
{{item.label}}
</a-select-option>
</a-select>
</a-form-item>
		</t-query-form>
    <a-row
			type="flex"
			justify="space-between"
			align="middle"
			class="global-oper-row mt-1"
		>
			<a-col :span="15" class="global-oper-row-title">{{
				$t('T9_boxPalletList')
			}}</a-col>
			<a-col :span="8" class="global-oper-row-extra">
				<a-button>{{ $t('T9_toExcel') }}</a-button>
			</a-col>
		</a-row>
    <t-table :loading="searchBtnLoading" :data="list.tableData">
      <t-column field="boxPalletId" :title="$t('T9_boxPalletId')" />
      <t-column field="type" :title="$t('T9_type')" />
      <t-column field="state" :title="$t('T9_state')" />
      <t-column field="qty" :title="$t('T9_qty')" />
      <t-column field="capacity" :title="$t('T9_capacity')" />
      <t-column field="createTime" :title="$t('T9_createTime')" />
      <t-column field="createUser" :title="$t('T9_createUser')" />
      <t-column field="lastEventTime" :title="$t('T9_lastEventTime')" />
      <t-column field="lastEventUser" :title="$t('T9_lastEventUser')" />
      <t-column field="lastComment" :title="$t('T9_lastComment')" />
      <t-column field="eqId" :title="$t('T9_eqId')" />
      <t-column field="portId" :title="$t('T9_portId')" />
      <t-column field="controlSite" :title="$t('T9_controlSite')" />
      <t-column field="currentSite" :title="$t('T9_currentSite')" />
      <t-column field="transferState" :title="$t('T9_transferState')" />
      <t-column field="floor" :title="$t('T9_floor')" />
      <t-column field="cstLocState" :title="$t('T9_cstLocState')" />
    </t-table>
	</div>
</template>

<script>
  import { defineComponent } from 'vue'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { shopIdList } from '@/views/options'
  import * as api from '@/api/common'

  export default defineComponent({
    name: 'ProcessGroup',
    components: {},
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        queryForm: {
          shopId: 'ARRAY',
          type: undefined,
          settingCode: undefined,
          boxPalletId: '',
          boxPalletState: undefined,
          inUseState: undefined,
          processGroupState: undefined,
          eqId: undefined
        },
        options: {
          shopIdList,
          typeList: [
            { label: 'Box', value: 'Box' },
            { label: 'Pallet', value: 'Pallet' }
          ],
          settingCodeList: [],
          inUseStateList: [
            { label: 'InUse', value: 'InUse' },
            { label: 'Empty', value: 'Empty' }
          ],
          processGroupStateList: [
            { label: 'WAIT', value: 'WAIT' },
            { label: 'RUN', value: 'RUN' }
          ],
          eqIdList: []
        },
        info: {
          boxId: '',
          grade: '',
          panelCapacity: '',
          panelQty: '',
          packinguser: '',
          packingtime: '',
          destination: '',
          palletId: '',
          route: '',
          operation: '',
          processState: '',
          owner: '',
          state: '',
          boxHoldState: '',
          settingCode: '',
          location: ''
        },
        list: {
          tableData: [],
          basicParams: {
            queryId: 'GetProcessGroupInfo',
            version: '80003',
            dtoName: 'ProcessGroupListDTO',
            menuName: 'viewBoxPalletInformation',
            usage: 'getProcessGroupInformation',
            site: '',
            qty: ''
          }
        },
        rules: {
          shopId: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          type: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ],
          inUseState: [
            {
              required: true,
              message: this.$t('valid_required2'),
              trigger: 'change'
            }
          ]
        }
      }
    },
    computed: {},
    created() {
      this.initOptions([
        { name: 'eqpId', params: { shopId: this.queryForm.shopId, bayId: '', version: '81003' } }
      ])
    },
    watch: {
      'queryForm.type': {
        handler(type) {
          this.queryForm.settingCode = undefined
          if (type) {
            if (type === 'Pallet') {
              if (this.queryForm.boxPalletState === 'Scrapped') {
                this.queryForm.boxPalletState = undefined
              }
            }
            this.initOptions([
              { name: 'settingCode', params: { type } }
            ])
          } else {
            this.options.settingCodeList = []
          }
        }
      }
    },
    methods: {
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const params = { ...this.queryForm, ...this.list.basicParams }
            api
              .getList(params)
              .then((res) => {
                this.list.tableData = res || []
                this.searchBtnLoading = false
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width {
	width: 120px;
}
</style>
